import React, { useContext } from 'react';

import { setAuthEmail } from '@/entities/auth/model/actions';
import { getAuthEmail } from '@/entities/auth/model/selectors';
import { getUserProfile } from '@/entities/profile/model/selectors';
import { ModalContext } from '@/shared/context/ModalContext';
import { ReactComponent as Apple } from '@/shared/icons/logo/Apple.svg';
import { ReactComponent as Google } from '@/shared/icons/logo/Google.svg';
import { ReactComponent as VK } from '@/shared/icons/logo/VK.svg';
import { ReactComponent as Yandex } from '@/shared/icons/logo/Yandex.svg';
import { Modals } from '@/shared/interfaces';
import { UserWithProfileV2Dto } from '@/shared/interfaces/generated';
import { useAppDispatch, useAppSelector } from '@/shared/store';
import { Button, ButtonVariants, Input, Loader } from '@/shared/ui';
import { useIsomorphicLayoutEffect } from 'usehooks-ts';

import cs from './Data.module.scss';

const authTypes = ({
  email,
  phone,
  onChangePassword,
}: {
  email?: string;
  phone?: string;
  onChangePassword?: () => void;
}): Record<UserWithProfileV2Dto['authType'], JSX.Element> => ({
  phone: (
    <>
      <div className={cs.inputBlock}>
        <span className={cs.blockTitle}>Телефон</span>
        <Input data-testid="input-phone" disabled profile value={phone} />
      </div>
      <Button
        className={cs.change}
        data-testid="button-modal-change_password"
        onClick={onChangePassword}
        variant={ButtonVariants.Link}
      >
        Изменить пароль
      </Button>
    </>
  ),
  google: (
    <div className={cs.social}>
      <div className={cs.social_button}>
        <Google />
      </div>
      <span>Google</span>
    </div>
  ),
  facebook: <></>,
  yandex: (
    <div className={cs.social}>
      <div className={cs.social_button}>
        <Yandex />
      </div>
      <span>Яндекс ID</span>
    </div>
  ),
  vkontakte: (
    <div className={cs.social}>
      <div className={cs.social_button}>
        <VK />
      </div>
      <span>VK ID</span>
    </div>
  ),
  apple: (
    <div className={cs.social}>
      <div className={cs.social_button}>
        <Apple />
      </div>
      <span>Apple ID</span>
      <span>{email}</span>
    </div>
  ),
  email: (
    <>
      <div className={cs.inputBlock}>
        <span className={cs.blockTitle}>Почта</span>
        <Input data-testid="input-email" disabled profile value={email} />
      </div>
      <Button
        className={cs.change}
        data-testid="button-modal-change_password"
        onClick={onChangePassword}
        variant={ButtonVariants.Link}
      >
        Изменить пароль
      </Button>
    </>
  ),
});

export const Data = () => {
  const email = useAppSelector(getAuthEmail);
  const { authType, phoneNumber } = useAppSelector(getUserProfile);
  const dispatch = useAppDispatch();
  useIsomorphicLayoutEffect(() => {
    dispatch(setAuthEmail(localStorage.getItem('authEmail') as string));
  }, []);
  const { openModal } = useContext(ModalContext);
  const onChangePassword = () => {
    openModal(Modals.ChangePassword);
  };
  return (
    <div className={cs.block}>
      <div className={cs.secondBlock}>
        {authType ? (
          authTypes({ email, phone: phoneNumber as string, onChangePassword })[authType]
        ) : (
          <div className={cs.social}>
            <Loader borderRadius={20} className={cs.social} width={64} />
            <Loader borderRadius={20} style={{ flex: 1 }} />
          </div>
        )}
      </div>
    </div>
  );
};
